<template>
  <div class="page-container">
    <md-app>
      <md-app-toolbar class="md-primary" md-elevation="0">
        <md-button
          class="md-icon-button"
          @click="toggleMenu"
          v-if="!menuVisible"
        >
          <md-icon class="fa fa-bars"></md-icon>
        </md-button>
        <span class="md-title">Library</span>
        <div class="md-toolbar-section-end">
          <md-menu md-size="auto" :md-offset-x="30">
            <div class="align-center" md-menu-trigger>
              <md-button class="md-icon-button">
                <md-icon class="fa fa-user-circle"></md-icon>
              </md-button>
              <span>{{ nickname }}</span>
            </div>
            <md-menu-content>
              <md-menu-item
@click="$router.push({ name: 'Profile' })"
                >个人信息</md-menu-item
              >
              <md-menu-item
@click="$router.push({ name: 'Changepwd' })"
                >修改密码</md-menu-item
              >
              <md-menu-item
@click="$router.push({ name: 'Login' })"
                >退出登录</md-menu-item
              >
            </md-menu-content>
          </md-menu>
        </div>
      </md-app-toolbar>

      <md-app-drawer :md-active.sync="menuVisible" md-persistent="mini">
        <md-toolbar class="md-transparent" md-elevation="0">
          <span>导航</span>
          <div class="md-toolbar-section-end">
            <md-button class="md-icon-button md-dense" @click="toggleMenu">
              <md-icon class="fa fa-angle-left"></md-icon>
            </md-button>
          </div>
        </md-toolbar>

        <md-list>
          <div
            v-for="(item, index) in $router.options.routes"
            :key="`list-item-${index}`"
          >
            <md-list-item
              :md-expand.sync="item.meta.leaf"
              v-if="item.meta.menuShow && item.meta.iconCls"
              :to="!item.meta.leaf && item.children[0].path"
            >
              <md-icon :class="item.meta.iconCls"></md-icon>
              <span class="md-list-item-text">{{ item.meta.title }}</span>
              <md-list v-if="item.meta.leaf !== false" slot="md-expand">
                <md-list-item
                  v-for="(child, index) in item.children"
                  :key="`child-${index}`"
                  class="md-inset"
                  :to="child.path"
                  >{{ child.meta.title }}</md-list-item
                >
              </md-list>
            </md-list-item>
          </div>
        </md-list>
      </md-app-drawer>
      <md-app-content>
        <v-breadcrumb>
          <v-breadcrumb-item separator="/" path="/">
            <b class="breadcrumb-index">首页</b>
          </v-breadcrumb-item>
          <v-breadcrumb-item v-for="(item, index) in matchRoutes" :key="index">
            {{ item.meta.title }}</v-breadcrumb-item
          >
        </v-breadcrumb>
        <router-view />
      </md-app-content>
    </md-app>
  </div>
</template>

<script>
// import Aside from '@/components/Aside.vue'
import { mapState } from 'vuex'
export default {
  name: 'Home',
  data: () => ({
    menuVisible: true,
    nickname: ''
  }),
  computed: {
    ...mapState(['userInfo']),
    matchRoutes: function() {
      return this.$route.matched.filter(item => {
        return item.meta.leaf !== false && item.name !== 'Dashboard'
      })
    }
  },
  methods: {
    toggleMenu() {
      this.menuVisible = !this.menuVisible
    }
  },
  mounted() {
    this.nickname = JSON.parse(localStorage.getItem('access_user')).nickname
  },
  watch: {
    'userInfo.nickname': function(val, oldVal) {
      console.log('userInfo changed')
      this.nickname = val
    }
  }
}
</script>

<style lang="less" scoped>
.md-app {
  height: 100vh;
  border: 1px solid rgba(#000, 0.12);
}
.align-center {
  cursor: pointer;
  display: flex;
  align-items: center;
}
// Demo purposes only
.md-drawer {
  width: 230px;
  max-width: calc(100vw - 125px);
}
.md-icon {
  font-size: 18px !important;
}
.breadcrumb-index {
  color: #448aff;
  cursor: pointer;
}
</style>
